<template>
  <div class="app-container" id="app">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <BaseTitle>购物车</BaseTitle>
    </div>
    <BaseBox class="cart-box" style="background: #fff">
      <template #title>
        <div class="thead">
          <div class="tr">
            <div class="th">名字</div>
            <div class="th">图片</div>
            <div class="th">单价</div>
            <div class="th">个数</div>
            <div class="th">总价</div>
            <div class="th">采摘日期</div>
            <div class="th">操作</div>
          </div>
        </div>
      </template>
      <template>
        <!-- 主体区域 -->
        <div class="tbody">
          <div class="tr" v-for="(item, index) in fruitList" :key="item.id">
            <div class="td">
              <BaseCheckBox v-model="item.isChecked">{{ item.name }}</BaseCheckBox>
            </div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <!-- <div class="td" @click="item.num === 0 && removeItem(item)"><BaseInputNum v-model="item.num" /></div> -->
            <div class="td" @click="zeroDel(item)"><BaseInputNum v-model="item.num" /></div>
            <div class="td">{{ item.num * item.price }}</div>
            <!-- <div class="td pick-td">{{ item.pickTime | formatTime }}</div> -->
            <div class="td pick-td">{{ item.pickTime | formatTime }}</div>
            <div class="td"><BaseButton @click="removeItem(item)" type="danger">删除</BaseButton></div>
          </div>
        </div>
        <!-- 空车 -->
        <div v-if="fruitList.length !== 0" class="bottom">
          <!-- 全选 -->
          <BaseCheckBox v-model="isCheckedAll">全选</BaseCheckBox>
          <!-- <BaseCheckBox :value="isCheckedAll" @input="isCheckedAll = $event">全选</BaseCheckBox> -->
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box"
              >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span
            >
            <!-- 结算按钮 -->
            <BaseButton type="success">结算( {{ totalCount }} )</BaseButton>
          </div>
        </div>
        <div v-else class="empty">
          <BaseTitle>🛒空空如也</BaseTitle>
        </div>
      </template>
    </BaseBox>
  </div>
</template>

<script>
// 随用随导入
import dayjs from 'dayjs'
export default {
  name: 'App',
  data() {
    return {
      fruitList: [
        {
          id: 1,
          name: '火龙果',
          icon: 'http://autumnfish.cn/static/火龙果.png',
          isChecked: true,
          num: 2,
          price: 6,
          pickTime: 1648121641000,
        },
        {
          id: 2,
          name: '荔枝',
          icon: 'http://autumnfish.cn/static/荔枝.png',
          isChecked: false,
          num: 7,
          price: 20,
          pickTime: 1647121641000,
        },
        {
          id: 3,
          name: '榴莲',
          icon: 'http://autumnfish.cn/static/榴莲.png',
          isChecked: false,
          num: 3,
          price: 40,
          pickTime: 1646121641000,
        },
        {
          id: 4,
          name: '鸭梨',
          icon: 'http://autumnfish.cn/static/鸭梨.png',
          isChecked: true,
          num: 10,
          price: 3,
          pickTime: 1645121641000,
        },
        {
          id: 5,
          name: '樱桃',
          icon: 'http://autumnfish.cn/static/樱桃.png',
          isChecked: false,
          num: 20,
          price: 34,
          pickTime: 1644121641000,
        },
      ],
    }
  },
  // 生命周期钩子 created 可以获取数据？
  created() {
    // this.fruitList = []
    // 读取缓存 并转数组
    let _list = JSON.parse(localStorage.getItem('fruitList'))
    // 空数组 / 空
    // console.log('_list:', _list)
    // 如果为空 null --布尔值 false
    if (_list === null) {
      // 没有缓存 赋初始值
      _list = [
        {
          id: 1,
          name: '火龙果',
          icon: 'http://autumnfish.cn/static/火龙果.png',
          isChecked: true,
          num: 2,
          price: 6,
          pickTime: 1648121641000,
        },
        {
          id: 2,
          name: '荔枝',
          icon: 'http://autumnfish.cn/static/荔枝.png',
          isChecked: false,
          num: 7,
          price: 20,
          pickTime: 1647121641000,
        },
        {
          id: 3,
          name: '榴莲',
          icon: 'http://autumnfish.cn/static/榴莲.png',
          isChecked: false,
          num: 3,
          price: 40,
          pickTime: 1646121641000,
        },
        {
          id: 4,
          name: '鸭梨',
          icon: 'http://autumnfish.cn/static/鸭梨.png',
          isChecked: true,
          num: 10,
          price: 3,
          pickTime: 1645121641000,
        },
        {
          id: 5,
          name: '樱桃',
          icon: 'http://autumnfish.cn/static/樱桃.png',
          isChecked: false,
          num: 20,
          price: 34,
          pickTime: 1644121641000,
        },
      ]
    }
    // 如果是空数组 []--布尔值 true
    if (_list.length === 0) {
      // 数据已经删除完毕
      _list = [
        {
          id: 1,
          name: '火龙果',
          icon: 'http://autumnfish.cn/static/火龙果.png',
          isChecked: true,
          num: 2,
          price: 6,
          pickTime: 1648121641000,
        },
        {
          id: 2,
          name: '荔枝',
          icon: 'http://autumnfish.cn/static/荔枝.png',
          isChecked: false,
          num: 7,
          price: 20,
          pickTime: 1647121641000,
        },
        {
          id: 3,
          name: '榴莲',
          icon: 'http://autumnfish.cn/static/榴莲.png',
          isChecked: false,
          num: 3,
          price: 40,
          pickTime: 1646121641000,
        },
        {
          id: 4,
          name: '鸭梨',
          icon: 'http://autumnfish.cn/static/鸭梨.png',
          isChecked: true,
          num: 10,
          price: 3,
          pickTime: 1645121641000,
        },
        {
          id: 5,
          name: '樱桃',
          icon: 'http://autumnfish.cn/static/樱桃.png',
          isChecked: false,
          num: 20,
          price: 34,
          pickTime: 1644121641000,
        },
      ]
    }
    // 赋值回去
    this.fruitList = _list
  },
  // 侦听器
  // 只会再侦听的数据改变时触发，其他数据改变 不会执行 相比于updated性能的消耗小
  watch: {
    // 删除会触发 更新内部的数据不会触发，watch默认不会检测内部的属性改变
    fruitList: {
      deep: true, // 开启深度监听
      handler() {
        // console.log('fruitList改变啦!')
        // 写入缓存 转为JSON的字符串
        localStorage.setItem('fruitList', JSON.stringify(this.fruitList))
        // 找到 个数为0的水果
        // findIndex find
        // find 循环数组
        // 每一项传入回调函数
        // 是否要这一项取决于 返回值 true（要） false（不要）
        // forEach全部遍历  find 找到停了 只找满足条件的第一个
        // const zeroFruit = this.fruitList.find(item => {
        //   if (item.num === 0) {
        //     return true
        //   } else {
        //     return false
        //   }
        // })
        // // console.log('zeroFruit:', zeroFruit)
        // // 只要 zeroFruit 不为空 就有水果
        // if (zeroFruit !== undefined) {
        //   this.fruitList = this.fruitList.filter(v => v.id !== zeroFruit.id)
        // }
      },
    },
  },
  methods: {
    // 为0 删除
    zeroDel(item) {
      // console.log('触发')
      if (item.num === 0) {
        this.fruitList = this.fruitList.filter(v => v.id !== item.id)
      }
    },
    removeItem(item) {
      // console.log('item:', item)
      const res = confirm(`你确定要把${item.name}删掉?`)
      if (res === true) {
        // console.log('删掉')
        // v 每一项
        this.fruitList = this.fruitList.filter(v => v.id !== item.id)
        // this.fruitList = this.fruitList.filter(v => {
        //   if (v.id === item.id) {
        //     // 和要删除的id相同则移除此元素
        //     return false
        //   } else {
        //     return true
        //   }
        // })
      }
    },
  },
  computed: {
    // 计算属性的 get和set来实现 全选和反选
    isCheckedAll: {
      get() {
        const _res = this.fruitList.every(v => {
          if (v.isChecked === true) {
            return true
          } else {
            return false
          }
        })
        return _res
      },
      set(val) {
        console.log('val:', val)
        this.fruitList.forEach(v => (v.isChecked = val))
      },
    },
    // 总个数
    totalCount() {
      // 返回结果
      // 被用户选中的那些水果
      // filter 返回的是数组
      // // 数组.forEach 数组.reduce
      // const filterFruit = this.fruitList.filter(v => v.isChecked)
      // // 累加
      // const count = filterFruit.reduce((prev, item) => {
      //   return prev + item.num
      // }, 0)
      // // reduce
      // return count

      // 简写
      return this.fruitList.filter(v => v.isChecked).reduce((prev, item) => prev + item.num, 0)
    },
    // 总价格
    totalPrice() {
      // 返回结果
      // // 被用户选中的那些水果
      // const filterFruit = this.fruitList.filter(v => v.isChecked)
      // // 累加 reduce会返回累加的结果
      // const price = filterFruit.reduce((prev, item) => {
      //   return prev + item.price * item.num
      // }, 0)
      // return price
      // 简写
      return this.fruitList.filter(v => v.isChecked).reduce((prev, item) => prev + item.price * item.num, 0)
    },
  },
  // 过滤器
  filters: {
    formatTime(time) {
      return dayjs(time).format('YYYY/MM/DD')
    },
  },
}
</script>

<style lang="less" scoped>
.app-container {
  width: 85vw;
  max-width: 1000px;
  margin: 0 auto;
}
// 顶部面包屑导航
.breadcrumb {
  font-size: 16px;
  color: gray;
  margin-bottom: 10px;
  padding: 5px;
}
// 购物车布局
.cart-box.base-box {
  background-color: #fff;
  .table {
    width: 100%;
    text-align: left;
    border-radius: 2px 2px 0 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  .th {
    color: gray;
    font-weight: 600;
    text-align: left;
    transition: background 0.3s ease;
  }

  .th {
    text-align: center;
  }

  .th,
  .td {
    position: relative;
    padding: 16px 16px;
    overflow-wrap: break-word;
    flex: 1;
  }
  .td img {
    width: 100px;
  }
  .pick-td {
    font-size: 14px;
  }

  .tr {
    display: flex;
    cursor: pointer;
    align-items: center;
  }
  .tbody .tr {
    border-bottom: 1px solid #ebeef5;
  }
  .tbody .tr:hover {
    background-color: #fbebd4;
  }
  .tr:nth-child(2n) {
    background-color: #fafafa;
  }
  .td {
    display: flex;
    justify-content: center;
    align-self: center;
  }

  .table img {
    width: 100px;
    height: 100px;
  }

  .bottom {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    border-top: none;
    padding-left: 20px;
  }
  .right-box {
    display: flex;
    align-items: center;
  }
  .price {
    color: hotpink;
    font-size: 30px;
    font-weight: 700;
    margin-right: 10px;
  }
  .price-box {
    display: flex;
    align-items: center;
  }
  .empty {
    text-align: center;
    font-size: 30px;
    color: #909399;
    height: 200px;
    font-size: 80px;
    line-height: 200px;
    box-sizing: border-box;
    cursor: pointer;
  }
}
</style>
